<template>
  <div class="box">
    <div id="zhu_zhuang_tu_x" @click="clickChart"></div>

    <span class="unit">单位: {{ unit }}</span>
  </div>
</template>

<script setup>
  import * as echarts from "echarts"
  import { ref, reactive, watch, onMounted } from 'vue'

  const props = defineProps(['value'])

  const emit = defineEmits(['emitChartParams'])

  const unit = ref('')
  const options = reactive({
    title: {
      text: '',
      top: '',
      left: '40px',
      show: true,
      textStyle: {
        color: '#fff',
        fontSize: '30px'
      }
    },
    grid: {
      left: "2%",
      right: "15%",
      top: "10%",
      bottom: "7%",
      containLabel: true,
    },
    legend: {},
    // 提示
    tooltip: {
      trigger: "item",
      show: true,
    },
    xAxis: {
      type: "value",
      boundaryGap: [0, 0.01],
      data: [],
      name: '',
      splitLine: false,
      axisTick: {
        alignWithLabel: true, //柱状图中心是否对齐刻度位置
        show: false //不显示刻度
      },
      nameTextStyle: {
        color: "#fff",
        nameLocation: "start",
      },
      axisLabel: {
        show: false,
        textStyle: {
          color: "#fff",
          fontSize: 20
        }
      }
    },
    yAxis: {
      type: "category",
      data: [],
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
          fontSize: 12,
          fontWeight: '500'
        },
        // rotate: -45
      },
    },
    series: [
      {
        data: [],
        type: "bar",
        barGap: "100%",
        barCategoryGap: "200%",
        barWidth: 5,
        backgroundStyle: {
          color: '#fff',
          borderWidth: 1,
          borderColor: '#fff',
          borderType: 'solid',
          shadowOffsetX: 1,
          shadowOffsetY: 1,
          opcity: 0.6
        },
        // 标签
        label: {
          show: true,
          position: "right",
          distance: 10,
          fontSize: 12,
          color: '#fff',
          fontWeight: 600,
          formatter: function(params) {
            return `{span|${params.value}}`
          },
          rich: {
            span: {
              color: '#fff',
              fontSize: '12px',
              fontWeight: '500',
              fontFamily: '',
              letterSpacing: '2px'
            }
          }
        },
        itemStyle: {
          // 渐变色
          color: new echarts.graphic.LinearGradient(0, 1, 1, 0,
            [
              {
                offset: 0,
                color: "#c1fdf8" // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#4af5e7" // 100% 处的颜色
              }
            ],
            false
          ),
          shadowColor: "rgba(0,160,221,1)",
          //模糊细数
          shadowBlur: 4
        },
      }
    ]
  })

  watch(() => props.value, 
    (newVal, oldVal) => {
      unit.value = newVal.unit
      options.xAxis.data = newVal.y
      options.yAxis.data = newVal.x
      options.series[0].data = newVal.y

      if (newVal.x) {
        initChart()
      }
    },
    {
      deep: true,
      // immediate: true
    }
  )

  onMounted(() => {
    initChart()
  })

  function initChart() {
    let chart = echarts.init(document.getElementById("zhu_zhuang_tu_x"));
    
    chart.on('click', params => {
      clickChart(params)
    })

    chart.setOption(options)
  }

  function clickChart(params) {
    emit('emitChartParams', params.data)
  }
</script>

<style scoped>
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #zhu_zhuang_tu_x {
    width: 100%;
    height: 100%;
  }

  .unit { position: absolute; left: 10px; bottom: 0px; color: #fff; font-size: 10px; }

  .s { color: #c1fdf8; }
</style>
